<template>
    <div class="defineIndex" >
        <userHeader/>
        <div class="breadClum">
      <span>
           <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
            <router-link :to="{path:'/catalog'}"><a class="bread2">流程目录 ></a></router-link>
            <a class="bread2">定义基础数据</a>
      </span>
        </div>
        <!--:rules="rules"-->
        <el-form ref="form" :model="form" label-width="100px">
            <div class="e-con-form">
                <h3 class="e-con-h3">{{form.control_title}}</h3>
                <div class="e-con-textarea">
                    <el-form-item label="评价标准" prop="evaluation_criterion">
                        <el-input type="textarea" v-model="form.evaluation_criterion"></el-input>
                    </el-form-item>
                    <el-form-item label="控制证据" prop="control_evidence">
                        <el-input type="textarea" v-model="form.control_evidence"></el-input>
                    </el-form-item>
                    <el-form-item label="检查方法" prop="inspection_method">
                        <el-input type="textarea" v-model="form.inspection_method"></el-input>
                    </el-form-item>
                </div>
                <div class="e-con-select">
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            影响程度
                        </div>
                        <div class="e-input-select" v-clickoutside="hideTable1">
                            <el-input readonly="" v-model="form.affect_extent" @focus="toggleTable"
                                      placeholder="请选择影响程度" suffix-icon="el-icon-arrow-down"></el-input>
                            <div class="e-effectRef">
                                <el-table
                                        ref="effectRef"
                                        @row-click="choiseIndex"
                                        stripe
                                        v-if="showTable"
                                        :data="effectDegree">
                                    <el-table-column
                                            prop="degree"
                                            label="控制效果"
                                            width="60">
                                    </el-table-column>
                                    <el-table-column
                                            prop="percent"
                                            label="影响税前利润百分比"
                                            width="125">
                                    </el-table-column>
                                    <el-table-column
                                            prop="target"
                                            label="影响控制目标程度"
                                            width="125">
                                    </el-table-column>
                                    <el-table-column
                                            prop="Operationlevel"
                                            label="影响企业日常运行程度"
                                            width="125">
                                    </el-table-column>
                                </el-table>
                            </div>

                        </div>
                    </div>
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            控制效果
                        </div>
                        <div class="e-input-select" v-clickoutside="hideTable2">
                            <el-input readonly="" v-model="form.control_effect" @focus="toggleTable2"
                                      placeholder="请选择控制效果" suffix-icon="el-icon-arrow-down"></el-input>
                            <div class="e-contrlEffect">
                                <el-table
                                        ref="contrlEffect"
                                        @row-click="choiseIndex2"
                                        stripe
                                        v-if="showTable2"
                                        :data="contrlEffect">
                                    <el-table-column
                                            prop="degree"
                                            label="控制效果"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="Operationlevel"
                                            label="控制措施性质"
                                            width="125">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            标准分值
                        </div>
                        <span class="e-standard">{{standard_score}}</span>
                    </div>
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            关键控制点
                        </div>
                        <div class="e-input-select e-key-point">
                            <el-input readonly="" placeholder="是否是关键控制点"
                                      v-model="keyPoint"></el-input>
                        </div>
                        <!--<el-select v-model="keyPoint" placeholder="请选择关键控制点" prop="is_critical" disabled="">-->
                        <!--<el-option label="是" value="1"></el-option>-->
                        <!--<el-option label="否" value="0"></el-option>-->
                        <!--</el-select>-->
                    </div>
                </div>
                <div class="e-con-select">
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            内控类型
                        </div>
                        <el-select v-model="form.control_type" placeholder="请选择内控类型" prop="control_type">
                            <el-option label="财务报告" value="1"></el-option>
                            <el-option label="非财务报告" value="0"></el-option>
                        </el-select>
                    </div>
                    <div class="e-form-sele e-list">
                        <div class="e-form-label">
                            SAP控制
                        </div>
                        <div class="e-input-select" >
                            <div class="e-div" @click.stop="toggleTable3"
                                 v-if="form.sapcontrol_company&&form.sapcontrol_company.length">
                                <span v-for="(item,index) in form.sapcontrol_company" class="e-span">{{item.name||item.company_name}}</span>
                            </div>
                            <el-input readonly="" @focus="toggleTable3" placeholder="请选择 SAP控制"
                                      suffix-icon="el-icon-arrow-down" v-else></el-input>
                        </div>
                        <!---->
                        <!--<el-select v-model="form.sapcontrol_company" placeholder="请选择 SAP控制" prop="sapcontrol_company">-->

                        <!--</el-select>-->
                    </div>
                    <div class="e-form-sele e-list">
                        <div class="e-form-label">
                            集团控制
                        </div>
                        <div class="e-input-select" >

                            <div class="e-div" @click.stop="toggleTable4"
                                 v-if="form.blockcontrol_company&&form.blockcontrol_company.length">
                                <span v-for="(item,index) in form.blockcontrol_company" class="e-span">{{item.name||item.company_name}}</span>
                            </div>
                            <el-input readonly="" @focus="toggleTable4" placeholder="请选择集团控制"
                                      suffix-icon="el-icon-arrow-down" v-else></el-input>
                        </div>

                    </div>
                    <div class="e-form-sele e-list">
                        <div class="e-form-label">
                            系统控制
                        </div>
                        <div class="e-input-select" >
                            <div class="e-div" @click.stop="toggleTable5"
                                 v-if="form.systemcontrol_company&&form.systemcontrol_company.length">
                                <span v-for="(item,index) in form.systemcontrol_company" class="e-span">{{item.name||item.company_name}}</span>
                            </div>
                            <el-input readonly="" @focus="toggleTable5" placeholder="请选择系统控制"
                                      suffix-icon="el-icon-arrow-down" v-else></el-input>
                            <!--<el-input  readonly=""   @focus="toggleTable5" placeholder="请选择系统控制" suffix-icon="el-icon-arrow-down">-->
                            <!--<span v-for="(item,index) in form.systemcontrol_company">{{item}}</span>-->
                            <!--</el-input>-->
                        </div>
                        <!--<el-select v-model="form.systemcontrol_company" placeholder="请选择系统控制" prop="systemcontrol_company">-->
                        <!--</el-select>-->
                    </div>
                </div>
                <div class="e-con-select">
                    <div class="e-form-sele">
                        <div class="e-form-label">
                            法规要求
                        </div>
                        <el-select v-model="form.is_legal" placeholder="请选择法规要求" prop="is_legal">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="e-form-part2">
                <h3><span>样本总量确定方法</span></h3>
                <div class="e-table">
                    <el-table
                            :row-class-name="tableRowClassName"
                            :data="form.samplemethod"
                            @selection-change="handleSelectionChange1"
                            ref="table1"
                            border
                            borderColor="#f00"
                            style="width: 100%">
                        <el-table-column
                                class="e-form-selection"
                                type="selection"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="samplemethod_num"
                                label="检查项"
                                min-width="5%">
                        </el-table-column>
                        <el-table-column
                                prop="samplemethod_content"
                                label="描述"
                                min-width="67%"
                        >
                        </el-table-column>
                        <el-table-column
                                min-width="25%"
                                label="操作">
                            <template slot-scope="scope">
                                <span class="e-editor"
                                      @click.stop="editor(scope.row.samplemethod_content,scope.row.index,0)">编辑</span>
                                <span class="e-delete" @click.stop="deleteItem(scope.row.index,0)">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="e-table-footer" v-if="form.samplemethod">
                        <div class="e-selectAll" style="width: 49px">
                            <el-checkbox @change="selectAll0" :checked="checked1"></el-checkbox>
                        </div>
                        <div class="e-selectText">
                            <span @click.stop="selectAll0">全选</span>
                            <span class="e-del" @click.stop="deleteBtn(0)">删除</span>
                            <span class="e-add" @click.stop="addBasic(0)">+添加</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="e-form-part2">
                <h3><span>样本检查内容</span></h3>
                <div class="e-table">
                    <el-table
                            :row-class-name="tableRowClassName"
                            border
                            ref="table2"
                            @selection-change="handleSelectionChange2"
                            borderColor="#f00"
                            :data="form.samplemaintain">
                        <el-table-column
                                class="e-form-selection"
                                type="selection"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="samplemaintain_num"
                                label="检查项"
                                min-width="5%">
                        </el-table-column>
                        <el-table-column
                                prop="samplemaintain_desc"
                                label="描述"
                                min-width="67%"
                        >
                        </el-table-column>
                        <el-table-column
                                min-width="25%"
                                label="操作">
                            <template slot-scope="scope">
                                <span class="e-editor"
                                      @click.stop="editor(scope.row.samplemaintain_desc,scope.row.index,1)">编辑</span>
                                <span class="e-delete" @click.stop="deleteItem(scope.row.index,1)">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="e-table-footer" v-if=form.samplemaintain>
                        <div class="e-selectAll" style="width: 50px">
                            <el-checkbox @change="selectAll1" :checked=checked2></el-checkbox>
                        </div>
                        <div class="e-selectText">
                            <span>全选</span>
                            <span class="e-del" @click.stop="deleteBtn(1)">删除</span>
                            <span class="e-add" @click.stop="addBasic(1)">+添加</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="e-form-submit">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" class="e-confirm">确认</el-button>
                    <el-button class="e-reset" @click.stop="reset">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <fixed/>
        <div class="companyForm" v-if="companyForm"  >
            <div class="fixedUl" >
                <p class="text-align">{{checkedTitle1}}</p>
                <ul>
                    <el-checkbox-group v-model="checkedCities1">
                        <el-checkbox v-for="(item,index) in formatData" @change="handleCheckedChange(item)" :label="item.company_id" :key="index" :value="item.company_name">
                            {{item.company_name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </ul>
                <div class="e-confirm-wrap">
                    <el-button type="primary" @click="confirmCompany" class="confirm-company">确认</el-button>
                </div>
            </div>
        </div>
        <el-dialog :title=title :visible.sync="dialogFormVisible" :before-close="handleClose" label-width="360px">
            <el-form :model="addform" :rules="rules" ref="addform">
                <el-form-item label="描述" prop="process_name">
                    <el-input v-model="addform.process_name" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAdd">取 消</el-button>
                <el-button type="primary" @click="confirmAdd('addform')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    import fixed from '@/components/fixed.vue'
    import userHeader from '@/components/header.vue'
    import {strToHexCharCode, toFixedBit, dec2hex, formatTime, getNewDate} from '@/utils/index.js'
    import treeToArray from '@/page/test/index.js';
    import Clickoutside from 'element-ui/lib/utils/clickoutside';
    export default ({
      directives: { Clickoutside },
        computed: {
            formatData: function () {
                let tmp;
                if (!Array.isArray(this.formCompany)) {
                    tmp = [this.formCompany]
                } else {
                    tmp = this.formCompany
                }
                const func = this.evalFunc || treeToArray
                const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
                console.log(args)
                console.log(func.apply(null, args))
                return func.apply(null, args)
            },
            standard_score: function () {
                if (this.form.affect_extent && this.form.control_effect) {
                    return this.form.affect_extent * this.form.control_effect
                } else {
                    return 0
                }
            },
            keyPoint: function () {
                if (this.form.affect_extent && this.form.control_effect) {
                    if (this.form.affect_extent * this.form.control_effect >= 12) {
                        this.form.is_critical = 1;
                        return "是"
                    }
                    else {
                        this.form.is_critical = 0
                        return "否"
                    }
                }
            }
        },
        data() {
            var checkProcessName = (rule, value, callback) => {
                if (value == undefined || value == '') {
                    return callback('请输入样本总量确定方法')
                } else {
                    callback()
                }
            };
            return {
                rules: {
                    process_name: [
                        {required: true, validator: checkProcessName, trigger: 'blur'}
                    ],
                },
                dialogFormVisible: false,
                title: '样本总量确定方法',
                checkedCities1: [],
                companyForm: false,
                isEditor: false,
                checkedTitle1: '请选择SAP控制',
                index: '',
                showTable: false,
                showTable2: false,
                id: '',
                formCompany: [],
                keyArray: ["是", "否"],
                addform: {},
                checked2: false,
                checked1: false,
                contrlEffect: [
                    {
                        degree: "1",
                        Operationlevel: "指导性控制",
                    },
                    {
                        degree: "2",
                        Operationlevel: "纠正性控制",
                    },
                    {
                        degree: "3",
                        Operationlevel: "检查性控制",
                    },
                    {
                        degree: "4",
                        Operationlevel: "预防性控制",
                    }],
                effectDegree: [
                    {
                        degree: "1",
                        percent: "1%以下",
                        target: "极轻微的",
                        Operationlevel: "不受影响",
                    },
                    {
                        degree: "2",
                        percent: "1%至5%",
                        target: "轻微的",
                        Operationlevel: "轻度影响",
                    },
                    {
                        degree: "3",
                        percent: "5%至10%",
                        target: "中等的",
                        Operationlevel: "中度影响",
                    },
                    {
                        degree: "4",
                        percent: "10%-20%",
                        target: "重要的",
                        Operationlevel: "严重影响",
                    },
                    {
                        degree: "5",
                        percent: " 20%以上",
                        target: "重大的",
                        Operationlevel: "重大影响",
                    }
                ],
                samplemethodCheck: [],
                samplemaintainCheck: [],
                form: {},
            }
        },
        components: {
            fixed,
            userHeader
        },
        methods: {
            //重置
            reset() {
                this.form = {}
            },
            //批量删除样本总量方法或者检查内容
            deleteBtn(id) {
                this.id = id;
                if (id == 0) {
                    if (this.samplemethodCheck.length == 0) {
                        this.$alert('请选择需要删除的选项', '提示')
                    } else {
                        for (var i in this.samplemethodCheck) {
                            console.log(this.samplemethodCheck[i].numrow)
                            for (var k in this.form.samplemethod) {
                                if (this.samplemethodCheck[i].samplemethod_content == this.form.samplemethod[k].samplemethod_content) {
                                    this.form.samplemethod.splice(k, 1)
                                }
                            }
                        }
                        this.samplemethodCheck = [];
                        this.id = '';
                        this.$refs.table1.clearSelection();
                    }
                } else if (id == 1) {
                    if (this.samplemaintainCheck.length == 0) {
                        this.$alert('请选择需要删除的选项', '提示')
                    } else {
                        for (var i in this.samplemaintainCheck) {
                            for (var k in this.form.samplemaintain) {
                                if (this.samplemaintainCheck[i].samplemaintain_desc == this.form.samplemaintain[k].samplemaintain_desc) {
                                    this.form.samplemaintain.splice(k, 1)
                                }
                            }
                        }
                        this.samplemaintainCheck = [];
                        this.id = '';

                    }
                }
            },
            //页脚底部操作全选删除
            selectAll0(val) {
                if (val) {
                    for (var i in this.form.samplemethod) {
                        this.$refs.table1.toggleRowSelection(this.form.samplemethod[i]);
                    }
                } else {
                    this.checked1 = false
                    this.$refs.table1.clearSelection();
                }
            },
            selectAll1(val) {
                if (val) {
                    for (var i in this.form.samplemaintain) {
                        this.$refs.table2.toggleRowSelection(this.form.samplemaintain[i]);
                    }
                } else {
                    this.checked2 = false
                    this.$refs.table2.clearSelection();
                }
            },
            handleSelectionChange1(val) {
                this.samplemethodCheck = val;
//          if(this.samplemethodCheck.length<this.form.samplemethod.length){
//
//          }
            },
            handleSelectionChange2(val) {
                this.samplemaintainCheck = val;
//          console.log(val)
//          if(this.samplemaintainCheck.length<this.form.samplemaintain.length){
//              console.log('!!!!!!!!')
//              that.checked2=false
//          }
//          console.log(this.checked2)
            },
            tableRowClassName({row, rowIndex}) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            addBasic(index) {
                if (index == 0) {
                    this.title = "样本总量确定方法"
                } else if (index == 1) {
                    this.title = "样本检查内容"
                }
                this.index = index
                this.dialogFormVisible = true
            },
            editor(text, index, id) {
                this.index = index
                this.dialogFormVisible = true
                this.addform.process_name = text
                this.isEditor = true
                console.log(id)
                this.id = id
            },
            deleteItem(index, id) {
                this.id = id;
                if (id == 0) {
                    this.form.samplemethod.splice(index, 1)
                } else if (id == 1) {
                    this.form.samplemaintain.splice(index, 1)
                }
            },
            confirmAdd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.isEditor) {
                            if (this.id == 0) {
                                console.log(this.id)
                                var arrTemp = {
                                    samplemethod_num: this.form.samplemethod.length,
                                    samplemethod_content: this.addform.process_name
                                }
                                this.$set(this.form.samplemethod, this.index, arrTemp)
                                console.log(this.form.samplemethod)
                            } else if (this.id == 1) {
                                var arrTemp = {
                                    samplemaintain_num: this.form.samplemaintain.length + 1,
                                    samplemaintain_desc: this.addform.process_name
                                }
                                this.$set(this.form.samplemaintain, this.index, arrTemp)
                                console.log(this.form.samplemaintain)
                            }
                            this.id = ''
                        } else {
                            if (this.index == 0) {
                                this.form.samplemethod.push({
                                    samplemethod_num: this.form.samplemethod.length + 1,
                                    samplemethod_content: this.addform.process_name
                                })
                            } else if (this.index == 1) {
                                this.form.samplemaintain.push({
                                    samplemaintain_num: this.form.samplemaintain.length,
                                    samplemaintain_desc: this.addform.process_name
                                })
                            }
                            this.isEditor = false
                        }
                        this.addform = {}
                        this.index = ''
                        this.dialogFormVisible = false
                    }
                });
            },
            cancelAdd() {
                this.dialogFormVisible = false
                this.isEditor = false
            },
            handleClose() {
                this.addform = {}
                this.dialogFormVisible = false
                this.isEditor = false
            },
            pushcheckedCities1(val) {
                console.log(val)
            },
            toggleTable3() {
                let that = this;
                console.log(this.form.sapcontrol_company)
                console.log(this.formatData)
                console.log(this.form.sapcontrol_company);
                //将被选中的数据提取出来
                if (this.form.sapcontrol_company.length > 0) {
                    this.form.sapcontrol_company.forEach(el=>{
                        this.formatData.forEach(element=>{
                            if(element.company_id == el.company_id){
                                this.checkedCities1.push(el.company_id);
                            }
                        })
                    })
                }
                console.log(this.checkedCities1);
                this.companyForm = true;
                this.checkedTitle1 = '请选择SAP控制'
            },
            toggleTable4() {
                this.companyForm = true
                this.checkedTitle1 = '请选择集团控制'
                if (this.form.blockcontrol_company.length > 0) {
                    this.form.blockcontrol_company.forEach(el=>{
                        this.formatData.forEach(element=>{
                            if(element.company_id == el.company_id){
                                this.checkedCities1.push(el.company_id);
                            }
                        })
                    })
                }

            },
            toggleTable5() {
                // systemcontrol_company
                this.companyForm = true
                this.checkedTitle1 = '请选择系统控制';
                console.log(this.formatData)
                if (this.form.systemcontrol_company.length > 0) {
                    this.form.systemcontrol_company.forEach(el=>{
                        this.formatData.forEach(element=>{
                            if(element.company_id == el.company_id){
                                this.checkedCities1.push(el.company_id);
                            }
                        })
                    })
                }

            },
            handleCheckedChange(){

            },
            confirmCompany() {
                if (this.checkedCities1.length == 0) {
                  console.log(this.checkedTitle1);
                  var temp = [];
                  //将被选中的公司的id的数据还原成 公司完整数据 赋值给 对应的数据
                  temp.push(0)
                  if (this.checkedTitle1 == '请选择SAP控制') {
                    this.form.sapcontrol_company = temp;
                  } else if (this.checkedTitle1 == '请选择集团控制') {
                    this.form.blockcontrol_company = temp;
                  } else if (this.checkedTitle1 == '请选择系统控制') {
                    this.form.systemcontrol_company = temp;
                  }
                  this.checkedCities1=[]
                  console.log(this.checkedCities1)
                  console.log(this.form.blockcontrol_company)
                  console.log(this.form);
//                    this.$alert('请选择相关企业', '提示')
//                    return false
                } else {
                    console.log(this.checkedTitle1);
                    var temp = [];
                    //将被选中的公司的id的数据还原成 公司完整数据 赋值给 对应的数据
                    this.checkedCities1.forEach(el=>{
                        this.formatData.forEach(element=>{
                            if(el == element.company_id){
                                temp.push(element)
                            }
                        })
                    });
                    if (this.checkedTitle1 == '请选择SAP控制') {
                        this.form.sapcontrol_company = temp;
                    } else if (this.checkedTitle1 == '请选择集团控制') {
                        this.form.blockcontrol_company = temp;
                    } else if (this.checkedTitle1 == '请选择系统控制') {
                        this.form.systemcontrol_company = temp;
                    }
                    this.checkedCities1=[]
                    console.log(this.checkedCities1)
                    console.log(this.form.blockcontrol_company)
                }
                this.companyForm = false

            },
            choiseIndex(row, event, column) {
                console.log(row.degree)
                this.form.affect_extent = row.degree
                this.showTable = false
                console.log(this.form.is_critical)
            },
            choiseIndex2(row, event, column) {
                this.form.control_effect = row.degree
                this.showTable2 = false
            },
            tableRowClassName({row, rowIndex}) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            onSubmit(formName) {
                console.log(this.form)
                var sapcontrol_company = []
                var blockcontrol_company = []
                var systemcontrol_company = []
                if (this.process_id) {
                    console.log(this.form)
                    // console.log()
                    function formatFormData(originArr,newArr) {
                        if(!originArr.length){
                            newArr.push(0)
                          console.log(newArr)
                        }else{
                          originArr.forEach(el=>{
                              if(el.company_id){
                                newArr.push(el.company_id)
                              }else{
                                newArr.push(0)
                                console.log(newArr)
                              }

                          });
                        }
                    }
                    formatFormData(this.form.sapcontrol_company,sapcontrol_company);
                    formatFormData(this.form.blockcontrol_company,blockcontrol_company);
                    formatFormData(this.form.systemcontrol_company,systemcontrol_company);

                    //
                    // for (var i in this.form.sapcontrol_company) {
                    //     sapcontrol_company[i] = this.form.sapcontrol_company[i].company_id
                    // }
                    // for (var k in this.form.blockcontrol_company) {
                    //     console.log(this.form.blockcontrol_company)
                    //     blockcontrol_company[k] = this.form.blockcontrol_company[k].company_id
                    // }
                    // for (var m in this.form.systemcontrol_company) {
                    //     systemcontrol_company[m] = this.form.systemcontrol_company[m].company_id
                    // }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.process_id) {
                                this.axios.put('/api/v1/flow/controlpoint/' + `${this.process_id}`,
                                    {
                                        process_id: this.form.process_id,
                                        evaluation_criterion: this.form.evaluation_criterion,
                                        control_evidence: this.form.control_evidence,
                                        inspection_method: this.form.inspection_method,
                                        affect_extent: this.form.affect_extent,
                                        control_effect: this.form.control_effect,
                                        standard_score: this.standard_score,
                                        is_critical: this.keyArray.indexOf(this.keyPoint),
                                        is_legal: this.form.is_legal,
                                        control_type: this.form.control_type,
                                        sapcontrol_company: sapcontrol_company,
                                        blockcontrol_company: blockcontrol_company,
                                        systemcontrol_company: systemcontrol_company,
                                        samplemethod: this.form.samplemethod,
                                        samplemaintain: this.form.samplemaintain
                                    })
                                    .then((res) => {
                                        console.log(res.data)
                                        this.dialogFormVisible = false
                                        if (res.data.code == 0) {
                                            this.$alert('添加基础数据成功', '提示');
                                            this.$router.go(-1)
                                        } else {
                                            this.$alert(res.data.message, '提示')
                                        }
                                    })
                            }
                        }
                    });
                }

            },
            toggleTable() {
                this.showTable = true
            },
            toggleTable2() {
                this.showTable2 = !this.showTable2
            },
            hideTable1() {
              this.showTable =false
            },
          hideTable2() {
            this.showTable2 =false
          },
            initData() {
                this.axios.get('/api/v1/flow/controlpoint/' + `${this.process_id}`)
                    .then((res) => {
                        this.form = res.data.data
                        if (res.data.code == 0) {
                            this.form = res.data.data
//                this.keyPoint =res.data.data.is_critical
//                this.standard_score =res.data.data.standard_score
//                this.form.standard_score =60
                        }
                    })
            },
            getCompanyForm() {
                this.axios.get('/api/v1/system/comsection')
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.formCompany = res.data.data
                            console.log(this.formCompany)
                        }
                    })
            }
        },
        mounted() {
            this.process_id = this.$route.query.process_id
            console.log(this.process_id)
            this.initData();
            this.getCompanyForm()

        }
    })
</script>
<style scoped>
  .defineIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
  }
    .defineIndex .e-con-h3 {
        font-size: 20px;
        text-align: center;
        color: #000;
        font-weight: bold;
        height: 58px;
        line-height: 58px;
        margin-bottom: 20px;
    }

    .defineIndex .e-con-form {
        width: 1400px;
        margin: 0 auto;
    }

    .defineIndex .el-form >>> .e-con-form .el-form-item__label {
        margin-right: 35px;
    }

    .defineIndex .el-form >>> .e-con-form .el-textarea {
        width: 1250px;
    }

    /*.el-form >>>  .e-con-form  .e-con-select .el-form-item{*/
    /*width: 25%;*/
    /*float: left;*/
    /*}*/
    .defineIndex .el-form >>> .e-con-form .e-con-select {
        height: 40px;
        position: relative;
        font-size: 0;
        margin-bottom: 20px;
        vertical-align: top;
    }

    .defineIndex .el-form >>> .e-con-form .e-con-select .e-form-sele {
        width: 25%;
        display: inline-block;
        font-size: 0;
        vertical-align: top;
    }

    .defineIndex .el-form >>> .e-con-form .e-con-select .e-form-sele .e-standard {
        display: inline-block;
        background-color: #f8f8f8;
        width: 57px;
        height: 40px;
        vertical-align: middle;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    .defineIndex .el-form >>> .e-con-form .e-con-select .e-form-label {
        width: 100px;
        display: inline-block;
        font-size: 14px;
        margin-right: 30px;
        text-align: right;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: top;
        line-height: 40px;
    }

    .defineIndex .e-form-part2 {
        width: 100%;
        padding: 0 38px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-top: 30px;
    }

    .defineIndex .e-form-part2 h3 span {
        font-size: 20px;
        color: #5d9120;
        padding-left: 10px;
    }

    .defineIndex .e-form-part2 h3 {
        position: relative;
        padding-bottom: 10px;
    }

    .defineIndex .e-form-part2 h3:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #8cc34b;

    }

    .defineIndex .e-table {
        background: #f3f9ed;
        padding: 26px 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .defineIndex .e-table .el-table >>> .el-table__header-wrapper .has-gutter th {
        background: #d4e9be;
    }

    .defineIndex .e-table .el-table >>> .el-table__header-wrapper .has-gutter th .cell {
        color: #5d9120;
        text-align: center;
        font-size: 18px;
    }

    .defineIndex .el-table >>> .el-table__header .el-table-column--selection .el-checkbox {
        display: none;
    }

    .defineIndex .e-table .el-table .cell span {
        display: inline-block;
        width: 63px;
        height: 28px;
        border: 1px solid #dddddd;
        text-align: center;
        line-height: 28px;
        font-size: 14px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .defineIndex .e-table .el-table .cell span.e-editor {
        background: white;
        color: #666;
        margin-right: 20px;
        margin-left: 30px;
    }

    .defineIndex .e-table .el-table .cell span.e-delete {
        background: #f66c6c;
        color: white;
        border-color: #f66c6c;

    }

    .defineIndex .e-table-footer {
        background: #f8f8f8;
        height: 50px;
        line-height: 50px;
        border:1px solid #aac983;
        border-top: 0;
    }

    .defineIndex .e-table-footer .e-selectAll {
        width: 48px;
        text-align: center;
        border-right: 1px solid #aac983;
        /*box-sizing: border-box;*/
        /*-webkit-box-sizing: border-box;*/
        display: inline-block;
    }

    .defineIndex .e-table-footer .e-selectText {
        display: inline-block;
        margin-left: 20px;
        color: #5d9120;
    }

    .defineIndex .e-selectText .e-del {
        font-size: 16px;
        color: #fff;
        padding: 6px 20px;
        background: #f56c6c;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        margin-left: 30px;
    }

    .defineIndex .e-selectText .e-add {
        font-size: 16px;
        color: #fff;
        padding: 6px 20px;
        background: #8cc34b;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        margin-left: 30px;
    }

    /*.defineIndex .el-table >>> td, .defineIndex .el-table >>> th.is-leaf {*/
        /*border-bottom: 1px solid #abc983;*/
    /*}*/

    .defineIndex .el-table >>> .el-table--border td, .defineIndex .el-table >>> .el-table--border th, .defineIndex .el-table >>> .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
        border-right: 1px solid #abc983;
    }

    .defineIndex .e-form-submit {
        margin-top: 60px;
    }

    .defineIndex .e-form-submit .el-button {
        padding: 10px 20px;
    }

    .defineIndex >>> .e-input-select {
        display: inline-block;
        width: 217px;
        position: relative;
        height: 40px;
    }
  .defineIndex >>>  .e-key-point .el-input__inner{
    background: #f8f8f8;
  }
    .defineIndex >>> .e-input-select {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        /*overflow: hidden;*/
    }

    .defineIndex >>> .e-input-select .el-input__inner {
        border: 0;
    }

    .defineIndex >>> .e-input-select .e-div {
        position: absolute;
        left: 15px;
        right: 30px;
        top: 0;
        height: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
        /*padding-left: 15px;*/
        /*padding-right: 30px;*/
    }

    .defineIndex >>> .e-input-select .e-div .e-span {
        display: inline-block;
        height: 100%;
        font-size: 12px;
        line-height: 40px;
        vertical-align: top;
        margin-right: 10px;
    }

    .defineIndex >>> .e-input-select .e-input-dropdown {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1111;
        height: 40px;
        line-height: 40px;
    }

    .defineIndex >>> .e-input-select .e-input-dropdown .el-dropdown-link {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .el-dropdown-menu {
        width: 400px !important;
        border: 1px solid red;
    }

    .defineIndex >>> .e-effectRef {
        /*height: auto;*/
    }

    .defineIndex >>> .e-effectRef .el-table {
        z-index: 9999;
        width: 436px;
        position: absolute;
        left: 0;
        top: 44px;
        max-width: none;
        border: 1px solid #8cc34b;
        border-right: none;
    }

    .defineIndex >>> .e-contrlEffect .el-table {
        z-index: 9999;
        position: absolute;
        left: 0;
        top: 44px;
        width: 206px;
        max-width: none;
        border: 1px solid #8cc34b;
      border-right: none;
    }

    .defineIndex >>> .e-input-select .el-table .has-gutter {
        background-color: #d4e9be;
    }

    .defineIndex >>> .el-table__header-wrapper tr, .defineIndex >>> .el-table__header-wrapper th {
        background-color: #d3e9bb;
    }

    .defineIndex >>> .e-input-select .el-table td, .defineIndex >>> .e-input-select .el-table th {
        padding: 5px 0;
    }

    .defineIndex >>> .e-input-select .el-table .cell {
        font-size: 10px;
        padding: 0 0;
        height: 24px;
        line-height: 24px;
    }

    .defineIndex >>> .el-input.is-disabled .el-input__inner {
        background-color: white;
        cursor: auto;
    }

    .defineIndex >>> .companyForm {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .defineIndex >>> .companyForm .confirm-company {
        text-align: center;
    }

    .defineIndex >>> .companyForm .fixedUl {
        position: absolute;
        left: 0px;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 550px;
        width: 420px;
        background: #fff;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
    }

    .defineIndex >>> .companyForm .fixedUl ul {
        height: 460px;
        overflow-y: scroll;
        padding: 0 20px;
    }

    .defineIndex >>> .companyForm .fixedUl ul .el-checkbox-group .el-checkbox {
        display: block;
        padding: 10px 0;
    }

    .defineIndex >>> .companyForm .fixedUl ul .el-checkbox-group .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #8bc34a;
    }

    .defineIndex >>> .companyForm .fixedUl ul .el-checkbox-group .el-checkbox:nth-child(1) {
        /*margin-left: 30px;*/
    }

    .defineIndex >>> .companyForm .fixedUl .text-align {
        font-size: 16px;

        text-align: center;
        font-weight: bold;
        padding: 10px 0;
    }
  .defineIndex >>> .el-dialog{
    width: 560px;
  }
    .defineIndex >>> .companyForm .fixedUl .e-confirm-wrap .el-button {
        padding: 8px 16px;
    }

    .defineIndex >>> .companyForm .fixedUl .e-confirm-wrap {
        text-align: center;
    }

    ::-webkit-scrollbar {
        display: none; /*隐藏滚轮*/
    }

    @media screen and (max-width: 1400px) {
      body,html{
        background: red;
      }
      .defineIndex{
        padding: 6px;
      }
        .defineIndex .e-con-form {
            width: 1200px;
            margin: 0 auto;
        }
        .defineIndex .el-form >>> .e-con-form .el-form-item__label {
          margin-right: 15px;
        }
        .defineIndex .el-form  .e-con-form .el-textarea {
            width: 1076px;
        }

        .defineIndex >>> .companyForm .fixedUl {
            height: 450px;
        }
      .defineIndex >>> .companyForm .fixedUl ul {
          height: 360px;
          padding:  0 20px;
      }
      .defineIndex .el-form >>> .e-con-form .e-con-select .e-form-label {
        width:100px;
        margin-right: 15px;
        text-align: right;
        padding: 0 12px 0 0;
      }
      .defineIndex .e-con-select .e-input-select {
        width:180px;
      }
      .defineIndex .el-form .e-con-select .e-form-sele .el-select{
        width: 180px;
      }
      .defineIndex >>> .e-input-select .el-input__inner {
        border: 0;
        padding-left: 15px;
        /*margin-left: 15px;*/
      }
    }
</style>
